const border = require('../tw-lib-base/border/props')
const padding = require('../tw-lib-base/padding/props')

module.exports = {
  minHeight: {
    type: String,
    default: '',
    name: '最小高度',
    filedType: 'string'
  },

  maxHeight: {
    type: String,
    default: '',
    name: '最大高度',
    filedType: 'string'
  },

  minWidth: {
    type: String,
    default: '',
    name: '最小宽度',
    filedType: 'string'
  },

  maxWidth: {
    type: String,
    default: '',
    name: '最大宽度',
    filedType: 'string'
  },

  bg: {
    type: String,
    default: '',
    name: '背景色',
    filedType: 'color'
  },

  bgColor1: {
    type: String,
    default: '',
    name: '背景渐变色1',
    filedType: 'color'
  },

  bgColor2: {
    type: String,
    default: '',
    name: '背景渐变色2',
    filedType: 'color'
  },

  bgGradientDeg: {
    type: String,
    default: '90',
    name: '背景渐变角度',
    filedType: 'string'
  },

  bgImage: {
    type: Array,
    default () {
      return []
    },
    name: '背景图片',
    filedType: 'file',
    limit: 1,
    maxSize: 1024
  },

  bgImageAlign: {
    type: String,
    default: 'center',
    name: '背景图片对齐方式',
    filedType: 'select',
    options: [
      {
        name: '左对齐',
        value: 'left'
      },
      {
        name: '居中',
        value: 'center'
      },
      {
        name: '右对齐',
        value: 'right'
      }
    ]
  },

  bgImageSize: {
    type: String,
    default: 'auto',
    name: '背景图片填充方式',
    filedType: 'select',
    options: [
      {
        name: '自动',
        value: 'auto'
      },
      {
        name: '覆盖',
        value: 'cover'
      },
      {
        name: '适应',
        value: 'contain'
      }
    ]
  },

  bgPosition: {
    type: String,
    default: 'padding-box',
    name: '背景位于',
    filedType: 'select',
    options: [
      {
        name: '边框内',
        value: 'border-box'
      },
      {
        name: '内边距内',
        value: 'padding-box'
      },
      {
        name: '内容区内',
        value: 'content-box'
      }
    ]
  },

  bgIsRepeat: {
    type: Boolean,
    default: false,
    name: '背景可重复',
    filedType: 'switch'
  },

  isFlex: {
    type: Boolean,
    default: false,
    name: '使用flex布局',
    filedType: 'switch'
  },

  widthRate: {
    type: String,
    default: '',
    name: '宽度在父容器中的占比',
    nameTip: '使用flex布局时，平分可用空间',
    filedType: 'string'
  },

  ...padding,

  hideOverflowContent: {
    type: Boolean,
    default: false,
    name: '隐藏超出容器范围内容',
    filedType: 'switch'
  },

  enableMediaQuery: {
    type: Boolean,
    default: false,
    name: '启用媒体查询',
    filedType: 'switch'
  },

  mediaPoint: {
    type: Array,
    default () {
      return [
        '1024px',
        '1200px'
      ]
    },
    name: '媒体查询断点',
    nameTip: '请从小到大指定媒体查询断点',
    filedType: 'list',
    subType: 'string',
    subDefault: '',
    max: 6,
    vif: {
      key: 'enableMediaQuery',
      value: true
    }
  },

  mediaPointWidth: {
    type: Array,
    default () {
      return [
        '100%',
        '1200px'
      ]
    },
    name: '媒体查询断点对应的内容宽度',
    nameTip: '请从小到大指定媒体查询断点的宽度',
    filedType: 'list',
    subType: 'string',
    subDefault: '',
    max: 6,
    vif: {
      key: 'enableMediaQuery',
      value: true
    }
  },

  shadowColor: {
    type: String,
    default: '',
    name: '投影色',
    filedType: 'color'
  },

  ...border,

  bottom: {
    type: String,
    default: '',
    name: '与窗体底部距离',
    nameTip: '指定该值容器会自动填满浏览器窗体',
    filedType: 'string'
  },

  enableScroll: {
    type: Boolean,
    default: false,
    name: '显示滚动条',
    nameTip: '请先设置高度',
    filedType: 'switch'
  },

  isFixed: {
    type: Boolean,
    default: false,
    name: '是否启用吸顶(底)',
    filedType: 'switch'
  },

  fixedBottom: {
    type: Boolean,
    default: false,
    name: '在底部固定显示',
    nameTip: '勾选此选项则为吸底',
    filedType: 'switch',
    vif: {
      key: 'isFixed',
      value: true
    }
  },

  fixedDistance: {
    type: String,
    default: 0,
    name: '吸顶(底)距离',
    filedType: 'string',
    vif: {
      key: 'isFixed',
      value: true
    }
  }
}
